<template>
  <div class="float-refresh">
    <i :class="{ 'fa': true, 'fa-refresh':true, 'rotate-refresh': isRotate }" @click="handleRefresh"></i>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isRotate: false
      }
    },
    methods: {
      handleRefresh () {
        this.isRotate = true
        this.$emit('updateData')
        setTimeout(() => {
          this.isRotate = false
        }, 1000)
      }
    }
  }
</script>

<style scoped>
.float-refresh {
  margin-bottom: 20rpx;
  overflow: hidden;
}
.fa-refresh {
  float: right;
  transition: all 1s;
}
.rotate-refresh {
  transform: rotate(180deg)
}
</style>